<template>
  <div class="home">
    <button @click="openAnima">弹出</button>

    <h3>宫格插件</h3>
    {{ tableInfo.colNum }} X {{ tableInfo.rowNum }} 表格 <br />

    <div class="box2" @mouseout="mouseoutChange" v-show="show">
      <div
        :class="
          index % 10 < tableInfo.rowNum &&
          Math.floor(index / 10) < tableInfo.colNum
            ? 'active'
            : 'original'
        "
        class="box2-item"
        v-for="(item, index) in 100"
        :key="index"
        @mouseover="itemChange(index)"
        @click="itemChick(index)"
      ></div>
    </div>
    <!-- 模拟的表格 -->
    <div class="table-box">
      <!-- <table>
        <tr v-for="(item, index) in tableInfo.colNum" :key="index">
          <td v-for="(item, index) in tableInfo.rowNum" :key="index"></td>
        </tr>
      </table> -->
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  components: {},
  data() {
    return {
      show: false,
      tableInfo: {
        rowNum: 0,
        colNum: 0,
      },
      flag: false,
    };
  },
  watch: {
    rowNum(val) {
      console.log(val);
    },
    show(val) {
      if (val) {
        this.tableInfo = {
          rowNum: 0,
          colNum: 0,
        };
      }
    },
  },
  methods: {
    openAnima() {
      this.show = !this.show;
    },
    itemChange(i) {
      let sum = 100;
      let row = sum / 10;
      // 横向坐标
      let rowNum = i % 10;
      // 纵向坐标
      let colNum = Math.floor(i / row);
      this.tableInfo.rowNum = rowNum + 1;
      this.tableInfo.colNum = colNum + 1;
    },
    itemChick(i) {
      let sum = 100;
      let row = sum / 10;
      // 横向坐标
      let rowNum = i % 10;
      // 纵向坐标
      let colNum = Math.floor(i / row);
      this.tableInfo.rowNum = rowNum + 1;
      this.tableInfo.colNum = colNum + 1;
      alert(`${this.tableInfo.colNum}${this.tableInfo.rowNum}`);
      this.show = false;
      console.log("点击");
      this.$emit("getTableInfo", this.tableInfo);
    },

    mouseoutChange() {
      console.log("移出");
      // this.tableInfo.rowNum = 0;
      // this.tableInfo.colNum = 0;
    },
  },
};
</script>
<style lang="scss" scoped>
.box {
  width: 100px;
  height: 100px;
  display: flex;
  background-color: #c5dcfa;
}
.box2 {
  width: 230px;
  height: 230px;
  // border: 1px solid #646464;
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
  // border: 1px solid gold;

  .box2-item {
    width: 9.6%;
    height: 9.6%;
    // border: 1px solid #646464;
    box-sizing: border-box;
    cursor: pointer;
  }
}
.active {
  background-color: #e4effd;
  border: 1px solid#c5dcfa;
}
.original {
  border: 1px solid #e2e6ed;
}
.table-box {
  width: 100%;
  height: 100%;
  td {
    width: 100px;
    height: 50px;
    background-color: lemonchiffon;
  }
}
</style>
